<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import ScreenTable from "@/components/ScreenTable/index.vue";
import { ITableData, IQueryParams, ITableListItem } from "./data";
import { IResponseData } from "@/@types/utils.request";
import { queryList, update, save, removeData } from "./service";
import { ElMessage } from "element-plus";
import { ResultCodeEnum } from "@/enums/utils.request.enum";
/* ====================== 表格 - 获取数据 S ============== */
// 表格 - 列表 - 初始化数据
const tableData = reactive<ITableData>({
	loading: false,
	list: [],
	pagination: {
		total: 0,
		current: 1,
		pageSize: 20,
		sizeChange: () => {},
		onChange: () => {},
	},
});

const searchKey = reactive<IQueryParams>({
	phoneNumber: "",
	username: "",
	realName: "",
});

// 表格 - index
const tableIndexMethod = (index: number) => {
	return index + (tableData.pagination.current - 1) * tableData.pagination.pageSize + 1;
};

const getList = async (key: IQueryParams): Promise<void> => {
	tableData.loading = true;
	try {
		const response: IResponseData<any> = await queryList({
			pageSize: tableData.pagination.pageSize,
			pageNum: tableData.pagination.current,
			data: key,
		});
		const { data, total } = response;
		tableData.list = data || [];
		tableData.pagination = {
			total: Number(total) || 0,
			current: tableData.pagination.current,
			pageSize: tableData.pagination.pageSize,
			sizeChange: (size) => {
				tableData.pagination.current = size;
				getList(key);
			},
			onChange: (size) => {
				tableData.pagination.current = size;
				getList(key);
			},
		};
	} catch (error: any) {
		console.log(error);
	}
	tableData.loading = false;
};
onMounted(() => {
	getList(searchKey);
});

const roleFormat = (row: any) => {
	// 取小数点后三位
	if (row.gender == 1) {
		return "男";
	}
	if (row.gender == 2) {
		return "女";
	}
	return "未知性别";
};

const dialogUpdateVisible = ref(false);
const dialogAddVisible = ref(false);

const saveData = reactive<ITableListItem>({
	username: "",
	password: "",
	departmentId: -1,
	realName: "",
	gender: -1,
	email: "",
	idNumber: "",
	phoneNumber: "",
	entryTime: "",
});
const updateData = reactive<ITableListItem>({
	employeeId: -1,
	username: "",
	password: "",
	departmentId: -1,
	realName: "",
	gender: -1,
	email: "",
	idNumber: "",
	phoneNumber: "",
	entryTime: "",
});

const saveSub = async (data?: ITableListItem) => {
	if (!data) {
		ElMessage.error("信息错误");
		return;
	}
	const response: IResponseData<ITableListItem> = await save(data);
	const { code } = response;
	if (code == ResultCodeEnum.SUCCESS) {
		ElMessage.success("保存成功");
		dialogAddVisible.value = false;
		getList(searchKey);
	} else {
		ElMessage.error(response.message);
	}
};

const showDetail = (data: ITableListItem) => {
	updateData.employeeId = data.employeeId;
	updateData.username = data.username;
	updateData.password = data.password;
	updateData.departmentId = data.departmentId;
	updateData.realName = data.realName;
	updateData.gender = data.gender;
	updateData.email = data.email;
	updateData.idNumber = data.idNumber;
	updateData.phoneNumber = data.phoneNumber;
	updateData.entryTime = data.entryTime;
	dialogUpdateVisible.value = true;
};
const updateSub = async (data?: ITableListItem) => {
	if (!data) {
		ElMessage.error("信息错误");
		return;
	}
	const response: IResponseData<ITableListItem> = await update(data);
	const { code } = response;
	if (code == ResultCodeEnum.SUCCESS) {
		ElMessage.success("保存成功");
		dialogUpdateVisible.value = false;
		getList(searchKey);
	} else {
		ElMessage.error(response.message);
	}
};
const removeUser = async (id: number) => {
	// TODO
	const response: IResponseData<ITableListItem> = await removeData(id);
	const { code } = response;
	if (code == ResultCodeEnum.SUCCESS) {
		ElMessage.success("删除成功");
		getList(searchKey);
	} else {
		ElMessage.error(response.message);
	}
};
</script>
<template>
  <ScreenTable row-key="id" :data="tableData.list" :loading="tableData.loading" :pagination="tableData.pagination">
    <!-- <template #header>
			<el-button type="primary" @click="dialogAddVisible = true">新增</el-button>
		</template> -->

    <template #header>
      <div class="header-box">
        <div class="header-box__left">
          <el-input placeholder="请输入昵称" v-model="searchKey.username" style="width: 180px;" />
          <el-input placeholder="请输入真实姓名" v-model="searchKey.realName" style="width: 180px;margin-left: 10px;" />
          <el-input placeholder="请输入联系电话" v-model="searchKey.phoneNumber" style="width: 180px;margin-left: 10px;" />
          <el-button type="primary" @click="getList(searchKey)">搜索</el-button>
        </div>
        <el-button type="primary" @click="dialogAddVisible = true">新增</el-button>
      </div>
    </template>

    <el-table-column fixed label="序号" type="index" :index="tableIndexMethod" width="80"> </el-table-column>
    <el-table-column label="昵称" prop="username"> </el-table-column>
    <el-table-column label="密码" prop="password"> </el-table-column>
    <el-table-column label="真实姓名" prop="realName" width="100"> </el-table-column>
    <el-table-column label="性别" prop="gender" :formatter="roleFormat" width="70"> </el-table-column>
    <el-table-column label="邮箱" prop="email"> </el-table-column>
    <el-table-column label="联系电话" width="150" prop="phoneNumber"></el-table-column>
    <el-table-column label="身份证号" prop="idNumber"> </el-table-column>
    <el-table-column label="入职时间" prop="entryTime"> </el-table-column>
    <el-table-column label="操作" prop="action" width="150" fixed="right">
      <template #default="scop">
        <el-button type="primary" link @click="showDetail(scop.row)">编辑</el-button>
        <el-button type="danger" link @click="removeUser(scop.row.employeeId)">删除</el-button>
      </template>
    </el-table-column>
  </ScreenTable>

  <!-- 修改 -->
  <el-dialog v-model="dialogUpdateVisible" top="20vh" title="修改信息">
    <el-form :model="updateData" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户Id" style="display: none;">
        <el-input v-model="updateData.employeeId" />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="updateData.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="updateData.password" />
      </el-form-item>
      <el-form-item label="部门ID">
        <el-input v-model="updateData.departmentId" />
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="updateData.realName" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="updateData.gender" placeholder="请选择">
          <el-option label="男" :value="1" />
          <el-option label="女" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="updateData.email" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="updateData.phoneNumber" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="updateData.idNumber" />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker v-model="updateData.entryTime" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
      </el-form-item>
      <el-button type="primary" @click="updateSub(updateData)">提交</el-button>
    </el-form>
  </el-dialog>

  <!-- 添加 -->
  <el-dialog v-model="dialogAddVisible" top="20vh" title="添加用户">
    <el-form :model="saveData" label-width="auto" style="max-width: 600px">
      <el-form-item label="昵称">
        <el-input v-model="saveData.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="saveData.password" />
      </el-form-item>
      <el-form-item label="部门ID">
        <el-input v-model="saveData.departmentId" />
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="saveData.realName" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="saveData.gender" placeholder="请选择">
          <el-option label="男" :value="1" />
          <el-option label="女" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="saveData.email" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="saveData.phoneNumber" />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="saveData.idNumber" />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker v-model="saveData.entryTime" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss" />
      </el-form-item>
      <el-button type="primary" @click="saveSub(saveData)">提交</el-button>
    </el-form>
  </el-dialog>
</template>
